<!-- 物资类型-物资类型种类详情页面 -->
<template>
  <!-- <px-dialog v-model="dialogVisible" class="equip-dialog" width="960px" @open="openDialog" @close="closeDialog"> -->
  <px-dialog v-model="dialogVisible" class="equip-dialog-wrap" title="物资种类管理详情" width="960px" @open="openDialog" @close="closeDialog">
    <div class="view-equip-detail-wrap">
      <px-scrollbar class="view-equip-detail">
        <!-- <div class="view-equip-title">物资种类管理详情</div> -->
        <div class="view-equip-wrap">
          <div class="view-equip-content">
            <div class="view-equip-item half">
              <div class="label">物资类型</div>
              <div class="text">{{ rowData.typeName || "-" }}</div>
            </div>
            <div class="view-equip-item half">
              <div class="label">物资名称</div>
              <div class="text">{{ rowData.name || "-" }}</div>
            </div>
          </div>
          <div class="view-equip-content">
            <div class="view-equip-item half">
              <div class="label">物资编码</div>
              <div class="text">{{ rowData.code }}</div>
            </div>
            <div class="view-equip-item half">
              <div class="label">品牌</div>
              <div class="text">{{ rowData.brand || "-" }}</div>
            </div>
          </div>
          <div class="view-equip-content">
            <div class="view-equip-item half">
              <div class="label">规格型号</div>
              <div class="text">{{ rowData.specification || "-" }}</div>
            </div>
            <div class="view-equip-item half">
              <div class="label">单位</div>
              <div class="text">{{ rowData.unit || "-" }}</div>
            </div>
          </div>
          <div class="view-equip-content">
            <div class="view-equip-item plus">
              <div class="label">安全库存</div>
              <div class="text">{{ rowData.safeStock || "-" }}</div>
            </div>
          </div>
          <div class="view-equip-content">
            <div class="view-equip-item plus">
              <div class="label">备注</div>
              <div class="text">{{ rowData.remark || "-" }}</div>
            </div>
          </div>
          <div class="view-equip-content">
            <div class="view-equip-item half">
              <div class="label">设备二维码</div>
              <div class="text">
                <px-upload v-model:file-list="qrcodeList" :limit="1" list-type="picture-card">
                  <template #file="{ file }">
                    <div>
                      <img class="px-upload-list__item-thumbnail" :src="file.url || file.fileUrl" alt="" />
                      <span class="px-upload-list__item-actions">
                        <span @click="photoPreview">
                          <px-icon><zoom-in /></px-icon>
                        </span>
                        <span @click="photoDownload(file)">
                          <px-icon>
                            <Download />
                          </px-icon>
                        </span>
                      </span>
                    </div>
                  </template>
                </px-upload>
                <px-dialog v-model="dialogVisiblePlus">
                  <img w-full :src="qrcodeUrl" style="margin: 0 auto" alt="设备二维码" />
                </px-dialog>
              </div>
            </div>
            <div class="view-equip-item half">
              <div class="label">物资标签</div>
              <div v-if="qrcodeImg[0]" class="text">
                <PhotoUpload photoType="view" :photoData="{ moduleName: 'eqpFile' }" :photoList="qrcodeImg" />
              </div>
              <div v-else class="text">-</div>
            </div>
          </div>
        </div>
      </px-scrollbar>
    </div>
    <div class="equip-dialog-footer" style="text-align: right">
      <px-button @click="closeDialog">关闭</px-button>
    </div>
  </px-dialog>
</template>

<script setup lang="ts">
import { computed, reactive, ref, toRefs } from "vue";
import axios from "axios";
import { getToken } from "@/utils/auth";
import { dataURLtoBlob } from "@/utils/common";
import PhotoUpload from "@/components/Upload/PhotoUpload.vue";

// 调用父级-关闭弹窗、查询列表方法
const emits = defineEmits(["closeDialog", "queryTable"]);
// 父级传过来的值
const props = defineProps(["dialogVisible", "dialogType", "rowData", "treeDataList", "source"]);
const dialogVisible = computed(() => props.dialogVisible);
const qrcodeList = ref([]);
const dialogVisiblePlus = ref(false);
const qrcodeUrl = ref("");
const qrcodeImg = ref([]); // 设备二维码文件
//下载文件
const photoDownload = file => {
  const link = document.createElement("a");
  link.style.display = "none";
  link.href = file.url;
  link.setAttribute("download", file.name);
  document.body.appendChild(link);
  link.click();

  document.body.removeChild(link);
};
const getUrl = async () => {
  axios({
    method: "post",
    url: "/ifp/erc/api/v1/material/createQrCode",
    data: { materialCode: props.rowData.code },
    headers: {
      "Content-Type": "application/json",
      Authorization: "Bearer " + (getToken().accessToken || "")
    }
  }).then(async res => {
    const blob = dataURLtoBlob(res?.data);
    const imgSrc = URL.createObjectURL(blob);
    qrcodeUrl.value = imgSrc; // 图片下载地址
    qrcodeList.value = [];
    qrcodeList.value.push({ url: res.data, name: "设备二维码" }); // 图片展示地址
  });
};
const photoPreview = () => {
  dialogVisiblePlus.value = true;
};

// 打开弹窗
const openDialog = async () => {
  console.log(props.rowData);

  getUrl();
  if (props.dialogType === "view") {
    const rowDataPlus = JSON.parse(JSON.stringify(props.rowData));
    const { bigFileDTO } = props.rowData;
    qrcodeImg.value = [bigFileDTO];
  }
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/view-detail.scss");
@import url("@/views/erc/scss/view-detail.scss");

.equip-dialog {
  .equip-dialog-footer {
    margin-top: 66px;
    text-align: right;
  }
}

p {
  color: black;
}

:deep(.px-upload--picture-card) {
  display: none;
}

:deep(.equip-dialog .equip-dialog-footer) {
  margin-top: 0;
}

:deep(.view-equip-detail) {
  height: calc(100vh - 300px);
  padding: 0;
  border-radius: 0;
}
:deep(.px-scrollbar__view) {
  height: 100%;
}
</style>
